---
title: 'InstancedMesh Hex'
---

An alternative to 'fromInstance' prop for meshes is to use
[instanced meshes](https://doc.babylonjs.com/typedoc/classes/BABYLON.InstancedMesh).
You can read up more on "InstancedMesh" in babylon.js, but they have less
overhead of separate instancing hundreds of meshes.

Essentially in this example we create a single "hex" mesh. Then we add hundreds
of instances using that mesh as a source. Each instance is set with it's own
position and color.

```tsx
<instancedMesh
  source={hexMesh}
  key={i}
  name={`hex-${i}`}
  position={
    new Vector3(
      x + tile.width() / 2 - GRID_WIDTH * 0.75,
      y + tile.height() / 2 - (Math.sqrt(3) * GRID_HEIGHT) / 2,
      0
    )
  }
  instancedBuffers={{
    color: tile.isHovered ? HOVER_COLOR : tile.color,
  }}
/>
```

<code src="./instanced-mesh-hex/InstancedMeshHex.tsx" />
